<script setup>
    import {ref as 响应} from 'vue'
    import {use全局状态} from '@/stores/全局状态'

    const 全局状态 = use全局状态()
    const 新用户名 = 响应('')
    const 新项目 = 响应('')
</script>

<template>
    <h1>主页</h1>
    <p>用户名: {{ 全局状态.用户名 }}</p>
    <input type="text" v-model="新用户名" placeholder="输入新用户名">
    <button @click="全局状态.修改用户名(新用户名)">修改用户名</button>
    <p>计数器: {{ 全局状态.计数器 }}</p>
    <button @click="全局状态.增加计数">增加计数</button>
    <hr>
    <ul>
        <li v-for="(项目, 索引) in 全局状态.列表" :key="索引">{{ 项目 }}</li>
    </ul>
    <input type="text" v-model="新项目" placeholder="输入新项目">
    <button @click="全局状态.添加项目(新项目)">添加项目</button>
</template>